<template>
  <transition
    enter-active-class="koi-screen-lock"
    leave-active-class="koi-screen-unlock"
  >
    <div
      v-if="props.open"
      class="koi-screen"
    >
      <div class="koi-screen-avatar">
        <el-avatar
          round
          :size="128"
          :src="user.avatar"
        />
        <div class="koi-screen-login-name text-shadow-lg">
          {{ user.loginName }}
        </div>
      </div>
      <div
        ref="slider"
        class="koi-screen-slider"
      >
        <div class="koi-screen-placeholder">
          滑动解锁
        </div>
        <div
          ref="sliderButton"
          class="koi-screen-slider-button"
          @mousedown="onMousedown"
        >
          <el-icon :size="25">
            <component :is="icon" />
          </el-icon>
        </div>
      </div>
      <div class="m-t-16px">
        <el-input
          v-model="lockPassword"
          style="width: 260px"
          type="password"
          placeholder="请输入密码..."
          show-password
        />
      </div>
    </div>
  </transition>
</template>

<script lang="ts" setup>
import { Right, Unlock } from "@element-plus/icons-vue";
import { computed, ref, watch, defineProps, defineEmits } from "vue";
import { koiMsgWarning, koiMsgError } from "@/utils/koi.ts";
import useGlobalStore from "@/stores/modules/global.ts";

const globalStore = useGlobalStore();

const props = defineProps<{
  open: boolean;
  lockPassword: string;
}>();

const emit = defineEmits(["update:open", "unlock"]);

const slider = ref<HTMLElement | null>(null);
const sliderButton = ref<HTMLElement | null>(null);
let startX = 0;
let distance = 0;
let maxDistance = 0;
let isTrigger = ref(false);

function onMousedown(e: MouseEvent) {
  distance = 0;
  maxDistance = 0;
  isTrigger.value = false;

  if (sliderButton.value) {
    sliderButton.value.style.transition = '';
    startX = e.screenX;
    maxDistance = slider.value?.clientWidth! - sliderButton.value.clientWidth - 10;
    document.addEventListener('mousemove', onMousemove);
    document.addEventListener('mouseup', onMouseup);
  }
}

function onMousemove(e: MouseEvent) {
  if (lockPassword.value == "" || lockPassword.value == null) {
    koiMsgWarning("请输入锁屏密码");
    return;
  } 

  if (globalStore.lockPassword !== lockPassword.value) {
    koiMsgError("想偷看朕的小秘密，He Tui");
    return;
  }

  if (sliderButton.value) {
    distance = e.screenX - startX;
    if (distance >= maxDistance) {
      distance = maxDistance;
      if (!isTrigger.value) {
        isTrigger.value = true;
        setTimeout(() => {
          emit('update:open', false);
          emit('unlock');
          globalStore.setGlobalState("lockPassword", "");
        }, 300);
      }
    } else if (distance < 0) {
      distance = 0;
    }
    sliderButton.value.style.transform = `translateX(${distance}px)`;
  }
}

function onMouseup() {
  document.removeEventListener('mousemove', onMousemove);
  document.removeEventListener('mouseup', onMouseup);
  lockPassword.value = "";
  if (!isTrigger.value && props.open && sliderButton.value) {
    sliderButton.value.style.transition = 'all 0.4s';
    sliderButton.value.style.transform = 'translateX(0)';
  }
}

watch(() => props.open, (newVal) => {
  if (newVal) {
    isTrigger.value = false;
  }
});

const icon = computed(() => isTrigger.value ? Unlock : Right);

interface IKoiUser {
  loginName: string;
  avatar?: string;
}

const user: IKoiUser = {
  loginName: "于心",
  avatar: "https://pic3.zhimg.com/80/v2-cb928dab1abe5231fb87db69498de128_720w.webp"
};

// 锁屏密码[自己输入]
const lockPassword = ref("");
</script>

<style lang="scss" scoped>
.koi-screen {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 9999 !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 20px 5px #0000000f;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.koi-screen-lock {
  animation: lock-down 1s ease-in-out;
}

.koi-screen-unlock {
  animation: lock-up 1s ease-in-out;
}

@keyframes lock-down {
  0% {
    transform: translate3d(0, -100%, 0);
  }
  60% {
    transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, 0, 0);
  }
  90% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: none;
  }
}

@keyframes lock-up {
  0% {
    transform: translate3d(0, 0, 0);
  }
  90% {
    transform: translate3d(0, -100%, 0);
  }
  100% {
    transform: none;
    opacity: 0;
  }
}

.koi-screen-avatar {
  margin-bottom: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.koi-screen-login-name {
  font-size: 30px;
  font-weight: 400;
  margin-top: 10px;
}

.koi-screen-slider {
  width: 300px;
  height: 60px;
  border-radius: 100px;
  background-image: linear-gradient(to right, rgb(72 168 237 / 25%), rgba(255, 255, 255, 0.4), rgb(72 168 237 / 25%));
  background-size: 200%;
  animation: gradation 7s infinite;
  position: relative;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15);
}

.koi-screen-slider:before {
  content: '';
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: -6px;
  right: -6px;
  border-radius: 60px;
  background-image: linear-gradient(to right, rgb(72 168 237 / 25%), rgba(255, 255, 255, 0.4), rgb(72 168 237 / 25%));
  background-size: 200%;
  z-index: -1;
  filter: blur(10px);
  opacity: 0.5;
  animation: gradation 7s infinite;
}

.koi-screen-slider-button {
  width: 50px;
  height: 50px;
  margin: 5px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.koi-screen-placeholder {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  pointer-events: none;
  opacity: 0.5;
  user-select: none;
  color: #1E71EE;
}

@keyframes gradation {
  100% {
    background-position: -400% 0;
  }
}
</style>
